<template>
  <ManageMenu></ManageMenu>
  <Man></Man>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="菜单名称"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="跳转的页面"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="是否已经隐藏"
          width="180">
        <template #default="scope">


          <span style="margin-left: 10px" v-if="scope.row.enable==true">隐藏状态</span>
          <span v-else>显示状态</span>

        </template>
      </el-table-column>
      <el-table-column
          label="上一级菜单"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px" v-if="scope.row.parentId==0">
            <span>没有上一级菜单</span>
          </span>
          <span v-else>
            {{ tableData[scope.row.parentId-1].title }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">
            修改菜单名称</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">将菜单隐藏起来</el-button>
          <el-button
              size="mini"
              type="warning"
              @click="handleRecover(scope.$index, scope.row)">恢复菜单状态</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ManageMenu from "@/components/menu/ManageMenu";
import instance from "@/utlis/request";
export default {
  components: {
    ManageMenu
  },
  data() {
    return {
      tableData: [],
    }
  },
  created:function (){
    this.initDate();
  },
  methods: {
    initDate:function (){
      instance.get("/Manage/menu").then(res=>{
        //console.log(res.data.data)全部的菜单数据
        this.tableData=res.data.data
      })
    },
    handleEdit(index, row) {//修改菜单名称
      //console.log(index, row);
      var name=row.title
      this.$prompt('请输入新的名字', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue:name,
        inputPattern:/[\u4e00-\u9fa5]/,
        inputErrorMessage: '格式不正确'
      }).then(({ value }) => {
        instance.get("/Manage/Update",{params:{
          id:row.id,username:value
          }})
        this.$message({
          type: 'success',
          message: '菜单的新名字是: ' + value
        });
        setTimeout(() => {
          this.initDate()
        }, 1000);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });
      });
    },
    handleDelete(index, row) {//删除这个菜单
      //console.log(index, row);
      this.$confirm('此操作将让用户菜单隐藏起来, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        instance.get("/Manage/DelectMenu",{params:{
            id:row.id
          }})
        this.$message({
          type: 'success',
          message: '隐藏成功!',
        });
        setTimeout(() => {
          this.initDate()
        }, 1000);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消隐藏'
        });
      });


    },
    handleRecover(index, row) {//回复菜单显示
      //console.log(index, row);
      this.$confirm('此操作将让用户菜单恢复状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        instance.get("/Manage/Recover",{params:{
            id:row.id
          }})
        this.$message({
          type: 'success',
          message: '恢复成功!',
        });
        setTimeout(() => {
          this.initDate()
        }, 1000);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消恢复'
        });
      });


    },
  }
}

</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

